<template>
	<view class="warp">
		<view class="input-main">
			<view class="buttom_input">
				<view class="textfield">
					<textarea @blur="cotate" @focus="ipt_focus" v-show="isKeyBoard" v-model="message" maxlength="300"
						cols="30" rows="10"></textarea>
					<!-- <input type="text"  > -->
					<!-- <view class="press" v-show="!isKeyBoard" @touchmove="longPressMove" @touchstart="longPressStart"
						@touchend="longPressEnd">长按说话</view> -->
				</view>
				<view class="emo" @tap="showEmo">
					<image src="../../static/images/cheat/emoji.png" mode=""></image>
				</view>
				<view class="other">
					<image src="../../static/images/cheat/other.png" mode="" v-if="!message" @tap="moreOption"></image>
					<view class="send" v-show="message.length" @mousedown.prevent="send">
						发送
					</view>
				</view>
			</view>
			<view class="emojibox" v-show="isEmo" :animation="emerge">
				<emoji @emojiIndex="getEmojiIndex" @del_back="del_back"></emoji>
			</view>
			<view class="morebox" v-show="isMore">
				<more @send_more="commonSend"></more>
			</view>
		</view>

		<view class="voice-bg" v-show="isVoice">
			<view class="voice-box">
				<view class="voice-box-bar">
					<view class="voice-time" :style="{width:vlength/0.6+'%'}">{{maxVoiceLength?maxVoiceLength+'\'\'':0}}
					</view>
				</view>
				<view class="voice-del">×</view>
			</view>
		</view>
	</view>
</template>

<script>
	import emoji from "../emoji/emoji.vue"
	import more from "../more/more.vue"
	//录音模块
	const recorderManager = uni.getRecorderManager();
	//是否自动播放
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		name: "submit",
		data() {
			return {
				isKeyBoard: true,
				message: '',
				isEmo: false,
				isMore: false,
				// inputfocus:true,
				inputHeight: '',
				timer: 0, //定时器
				vlength: 1, //音频时长
				emerge: {},
				voicePath: '',
				isVoice: false,
				maxVoiceLength: 1,
				//点击 开始录音的位置
				pageY: 0
			};
		},
		components: {
			emoji,
			more
		},
		methods: {
			send() {
				//把message数据发送给webSocket 然后清空输入框
				//生成一段标签文字插入到聊天信息中
				let msg = this.message.trim()
				// 保证不为空 才能发送
				if (msg.length > 0) {
					this.commonSend(msg, 0)
				}
				setTimeout(() => {
					this.message = ''
				}, 10)
			},
			// 用户通用的发送文件函数
			// @params msg信息数据
			// @params type数据类型
			commonSend(msg, type) {
				let data = {
					message: msg,
					types: type
				}
				// console.log(data,'submit')
				// console.log(data.message.location)
				this.$emit('sendMsg', data)
			},
			//失去焦点
			cotate() {
				if (this.isEmo) {
					this.isEmo = ''
					this.isEmo = false
				}
				if (this.isMore) {
					this.isMore = ''
					this.isMore = false
				}
				setTimeout(() => {
					this.setIptHeight()
				}, 100)
				//失去焦点也需要
			},
			//获得焦点
			ipt_focus(e) {
				if (this.isEmo) {
					this.isEmo = ''
					this.isEmo = false
				}
				if (this.isMore) {
					this.isMore = ''
					this.isMore = false
				}
				setTimeout(() => {
					this.setIptHeight()
				}, 100)
			},
			getEmojiIndex(e) {
				this.message += e
			},
			// 两个部分交互展示的逻辑
			KeyBoard() {
				this.isEmo = false
				this.isMore = false
				setTimeout(() => {
					this.setIptHeight()
				}, 100)
				this.isKeyBoard = !this.isKeyBoard
			},
			// 显示表情
			showEmo() {
				this.isMore = false

				// 延时获取，因为太快了得到的值是错误的
				setTimeout(() => {
					this.setIptHeight()
				}, 100)
				this.isEmo = !this.isEmo
				this.isKeyBoard == false ? this.isKeyBoard = true : this.isKeyBoard
			},
			//获取整个提交模块的高度 传递给父组件 
			// @params el元素class
			setIptHeight(el = 'emojibox') {
				const query = uni.createSelectorQuery().in(this);
				query.select(`.${el}`).boundingClientRect(data => {
					// this.inputHeight=data.height
					this.$emit("getIptHeight", data.height)
				}).exec()
			},
			del_back() {
				//删除的字符如果不是中文和英文字符
				let chineseRegx = /[\u4e00-\u9fa50-9a-zA-Z_]/
				let msgLen = this.message.length - 1
				let lastStr = this.message[msgLen]
				console.log(chineseRegx.test(this.message[msgLen]));
				if (this.message) {
					if (chineseRegx.test(this.message[msgLen])) {
						this.message = this.message.slice(0, -1)
					} else {
						this.message = this.message.slice(0, -2)
					}
				}
			},
			//更多选项
			moreOption() {
				this.isEmo = false
				setTimeout(() => {
					this.setIptHeight('morebox')
				}, 100)
				this.isMore = !this.isMore
				this.isKeyBoard == false ? this.isKeyBoard = true : this.isKeyBoard
			},
			// 点击开始录音
			//这一块的执行先后顺序 1 按下 离开 2 按下 滑动 3按下 滑动 离开
			longPressStart(e) {
				this.pageY = e.changedTouches[0].pageY
				console.log(this.pageY);
				this.isVoice = true
				this.vlength = 1
				//开始录音
				console.log('开始录音');
				let i = 1
				if (this.timer != null) clearInterval(this.timer)
				this.timer = setInterval(() => {
					i++
					this.maxVoiceLength = i
					this.vlength = i
					if (i > 60) {
						clearInterval(this.timer)
						this.timer = null
						// 时间到了60面 就发送 调用那个方法就会关闭遮罩层
						this.longPressEnd()
					}
				}, 1000)
				recorderManager.start();

			},
			//结	束录音
			longPressEnd() {
				const self = this
				console.log("结束录音");
				recorderManager.stop();
				clearInterval(this.timer)
				//recorderManager中onStop 结束时调用，可以得到res文件
				recorderManager.onStop((res) => {
					console.log('recorder stop' + JSON.stringify(res));
					//录音结束后 获得音频播放地址 和timer 传递给chat页面
					let data = {
						//音频地址
						message: {
							voice: res.tempFilePath,
							time: this.vlength
						},
						//表示语音
						types: 2
					}
					//start成功录音进行，this.isVoice为真 
					//离开 先发送消息，然后在设置this.isVoice为假
					//若是按住屏幕移动到了取消发送消息 就会先触发this.isVoice=false
					if (this.isVoice) {
						this.$emit('sendMsg', data)
						setTimeout(() => {
							this.setIptHeight()
						}, 100)
					}
					this.isVoice = false
				});
				console.log(this.vlength, 'timer');
				console.log('结束');
				//计时牌恢复60
				this.timer = 0
				this.maxVoiceLength = 1;
			},
			longPressMove(e) {
				if (this.pageY - e.changedTouches[0].pageY > 100) {
					//在按住离开时可以通过遮罩层的状态 是否发送信息
					this.isVoice = false
					//取消发送
					console.log(e.changedTouches[0].pageY);
				}
				//当按住移动到删除 也要重置时间
				// this.maxVoiceLength=60
				// console.log('按住移动时间');
			}
		}

	}
</script>

<style lang="scss">
	.warp {}

	.input-main {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		// height: 88rpx;
		// border: 1px solid;
		// 底部安全距离
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;

		.emojibox {
			width: 100%;
			// height: 350rpx;
			background-color: #FFFFFF;
			animation: slideinbottom 0.5s ease-in-out;
		}

		.morebox {
			animation: slideinbottom 0.5s;
		}

		@keyframes slideinbottom {
			from {
				transform: translateY(20%);
			}

			to {
				transform: translateY(0%);
			}
		}

		.keyborad {
			width: 100%;
			// height: 350rpx;
			background-color: #FFFFFF;
		}
	}

	.buttom_input {
		z-index: 9;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 10rpx 0 10rpx;
		overflow: hidden;

		.voice {
			// width: 88rpx;
			// border: 1px solid red;
		}

		.textfield {
			width: 70%;

			textarea {
				height: 50rpx;
				padding-left: 10rpx;
				width: 100%;
				font-size: 32rpx;
				background-color: #e8e8e8;
				line-height: 50rpx;
				// border: 1px solid red;
			}
		}

		.emo {
			width: 10%;
			text-align: center;
			line-height: 10rpx;
			// border: 1px solid red;
		}

		.other {
			width: 10%;

			// border: 1px solid red;
			image {
				display: block;
				// border: 1px solid red;
				margin: 0 auto;
			}
		}

		image {
			line-height: 10rpx;
			width: 44rpx;
			height: 44rpx;
		}

		input {
			padding-left: 20rpx;
			width: 440rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			font-size: 35rpx;
		}

		.press {
			padding-left: 20rpx;
			width: 470rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #ededed;
			text-align: center;
			border-radius: 10rpx;
			font-size: 35rpx;
		}

		.send {
			font-size: 32rpx;
			// padding: 10rpx;
			height: 60rpx;
			line-height: 56rpx;
			width: 88rpx;
			text-align: center;
			// line-height: 10rpx;
			background-color: greenyellow;
			border-radius: 10rpx;
		}
	}

	.voice-bg {
		position: fixed;
		top: 0rpx;
		bottom: 88rpx;
		width: 100%;
		height: 100%;
		background: #62626270;
		z-index: 998;

		.voice-box {
			position: absolute;
			bottom: 0px;
			width: 100%;
			height: 50%;

			.voice-time {
				font-weight: 700;
				border-radius: 55rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 36rpx;
				min-width: 10%;
				height: 60rpx;
				margin: 0 auto;
				background-color: #35ff41;
			}

			.voice-box-bar {
				border: 1px solid rgba(255, 255, 255, 0.4);
				font-weight: 700;
				border-radius: 55rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 36rpx;
				width: 90%;
				height: 60rpx;
				margin: 0 auto;
				background-color: rgba(255, 255, 255, 0.23);
				;
			}

			.voice-del {
				color: #fff;
				font-weight: 700;
				border-radius: 100%;
				line-height: 150rpx;
				text-align: center;
				font-size: 40rpx;
				width: 150rpx;
				height: 150rpx;
				position: fixed;
				bottom: 120rpx;
				right: 50%;
				transform: translate(50%, 0);
				background-color: #ff0000;
			}
		}
	}
</style>